<template>
  <div class="container">
    <title-header title-name="抢糖果配置"/>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="ruleForm.status" size="medium">
          <el-radio :label="1">开启</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="接龙规则" prop="rule">
        <el-radio-group v-model="ruleForm.rule" size="medium">
          <el-radio :label="0">最小接龙</el-radio>
          <el-radio :label="1">最大接龙</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="btn_list">
        <div v-for="(item, index) in btnList" :class="{ active: item.active }" :key="index" @click="btnClick(index)">
          {{ item.name }}
        </div>
      </div>

      <el-form-item v-if="!btnList[0].active" label="是否开启" prop="is_show">
        <el-radio-group v-model="ruleForm.is_show" size="medium">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
<!--      <el-form-item v-if="!btnList[0].active" label="开始时间" prop="show_start_time">
        <el-date-picker
          v-model="ruleForm.show_start_time"
          value-format="timestamp"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item v-if="!btnList[0].active" label="结束时间" prop="show_start_time">
        <el-date-picker
          v-model="ruleForm.show_end_time"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>-->

      <el-form-item label="人数" prop="join_num">
        <el-input v-model="ruleForm.join_num" style="width: 60%" placeholder="请输入人数"></el-input>
      </el-form-item>
      <el-form-item label="糖果数量" prop="sugar_num">
        <el-input v-model="ruleForm.sugar_num" style="width: 60%" placeholder="请输入糖果数量"></el-input>
      </el-form-item>
      <el-form-item label="保证金" prop="cost">
        <el-input v-model="ruleForm.cost" style="width: 60%" placeholder="请输入保证金"></el-input>
      </el-form-item>
      <el-form-item label="糖果礼物" prop="region">
        <el-select v-model="ruleForm.region" style="width: 60%" placeholder="请选择糖果礼物">
          <el-option label="糖果" value="糖果"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-button class="submit_btn" type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
  </div>
</template>

<script>
import titleHeader from './childComps/titleHeader'
import { candyConfig, configCandy } from '../../../api/gradCandy/gradCandy'

export default {
  name: "gradCandyConfig",
  data() {
    return {
      ruleForm: {
        id: null,
        // 状态
        status: null,
        // 规则 : 规则: 0最低 1最高
        rule: null,
        // 加入人数
        join_num: '',
        // 糖果数量
        sugar_num: '',
        // 押金
        cost: '',
        region: '糖果',
        is_show: null,
        /* show_start_time: null,
        show_end_time: null*/
      },
      rules: {
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        join_num: [
          { required: true, message: '请输入人数', trigger: 'change' }
        ],
        sugar_num: [
          { required: true, message: '请输入糖果数', trigger: 'change' }
        ],
        cost: [
          { required: true, message: '请输入保证金', trigger: 'change' }
        ],
        rule: [
          { required: true, message: '请选择接龙规则', trigger: 'change' }
        ],
        is_show: [
          { required: true, message: '请选择是否开启', trigger: 'change' }
        ],
        show_start_time: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        show_end_time: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      },
      // 按钮集合 新秀赛、 大侠赛、 盟主赛
      btnList: [
        {
          name: '新秀赛',
          active: true
        },
        {
          name: '大侠赛',
          active: false
        },
        {
          name: '盟主赛',
          active: false
        },
      ],
      // 相关配置
      configMessage: []
    };
  },
  components: {
    titleHeader
  },
  created() {
    this.getConfig()
  },
  methods: {
    /**
     * submitForm
     * @desc 点击提交按钮
     * @param formName form 表单的 ref name
     * configCandy
     */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.ruleForm.id) {
            let obj = Object.assign(this.ruleForm)
            /*obj.show_start_time = obj.show_start_time / 1000
            obj.show_end_time = obj.show_end_time / 1000*/
            if (this.btnList[0].active) {
              delete obj.is_show
              /*delete obj.show_start_time
              delete obj.show_end_time*/
            }
            const detail = await configCandy(this.ruleForm)
            if (detail.code === 200) {
              this.$message.success('修改成功!')
              // this.resetForm('ruleForm')
              await this.getConfig()
            }
          } else {
            this.$message.error('请选择三种赛事的一种!')
          }
        } else {

          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * btnClick
     * @param index 当前按钮点击的索引
     */
    btnClick(index) {
      this.btnList.map(item => item.active = false)
      this.$set(this.btnList[index], 'active', true)
      this.configMessage.map(item => {
        if (item.name === this.btnList[index].name) {
          item.sugar_num = item.gift_num
          Object.assign(this.ruleForm, item)
        }
      })
    },
    /**
     * getConfig
     * @desc 获取配置信息
     */
    async getConfig() {
      const detail = await candyConfig()
      if (detail.code === 200) {
        this.configMessage = detail.data
        this.btnClick(0)
        /*this.configMessage.map(item => {
          item.show_start_time = item.show_start_time * 1000
          item.show_end_time = item.show_end_time * 1000
        })*/
      }
    }
  }
}
</script>

<style scoped lang="scss">

@import "./index";

</style>
